<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>frame</title>
    <link rel="stylesheet" type="text/css" href="../css/api.css" />
    <link rel="stylesheet" type="text/css" href="../css/common.css" />
    <style>
        #main{
            padding: 0;
        }
        .pull-left{
            float: left;
        }
        .pull-right{
            float: right;
        }
        .profile_box{
            height: 182px;
            width: 100%;
            background: url(../image/api_35.png) center center no-repeat;
            background-size: 100% 100%;
        }
        .profile_box.ta{
            background: url(../image/tm_bg_profile_banner_savvy.png) center center no-repeat;
            background-size: 100% 100%;
        }
        .profile_top{
            width: 100%;
            height: 121px;
            position: relative;
        }
        .profile_top.ta{
            height: 134px;
        }
        .profile_top .msg_icon{
            position: absolute;
            right: 24px;
            color: #FFF;
            top: 13px;
            width: 26px;
            height: 18px;
            background: url(../image/tm_mytmall_icon_message.png) center center no-repeat;
            background-size: 100% 100%;
        }
        .profile_top .qrcode-icon{
            position: absolute;
            right: 24px;
            color: #FFF;
            top: 13px;
            width: 24px;
            height: 24px;
            background: url(../image/tm_icon_fun_qrcode.png) center center no-repeat;
            background-size: 100% 100%;
        }
        .profile_top .config{
            position: absolute;
            right: 24px;
            color: #FFF;
            bottom: 13px;    
        }
        .profile_top .user-icon{
            position: absolute;
            width: 90px;
            height: 90px;
            left: 50%;
            top: 14px;
            display: block;
            border-radius: 45px;
            -webkit-transform: translateX(-50%);
                    transform: translateX(-50%);
        }
        .profile_top .user-box{
            position: absolute;
            bottom: 0;
            left: 50%;
            -webkit-transform: translateX(-50%);
                    transform: translateX(-50%);
        }
        .user-box .user-name{
            color: #FFF;
        }
        .profile_top .user-gender{
            display: inline-block;
            width: 15px;
            height: 19px;
            vertical-align: bottom;
        }
        .user-gender.male{
            background: url(../image/tm_icon_gender_male.png) center center no-repeat;
            background-size: 15px 19px;
        }
        .user-gender.female{
            background: url(../image/tm_icon_gender_female.png) center center no-repeat;
            background-size: 15px 19px;
        }
        .login_btn{
            border: 1px solid #FFF;
            position: absolute;
            left: 50%;
            top: 50%;
            -webkit-transform: translate(-50%,-50%);
                    transform: translate(-50%,-50%);
            padding: 0.5em 1em;
            border-radius: 5px;
            color: #FFF;
        }



        .profile_box .tabBar-ta{
            height: 42px;
            width: 100%;
        }
        .tabBar-ta .tabBar_inner{
            float: left;
            width: 33%;
            height: 100%;
            background: url(../image/profile_white_dividing.png) right center no-repeat;
            background-size: 1px 100%;

        }
        .tabBar-ta .tabBar_inner.last{
            background: none;
        }
        .tabBar-ta .tabBar_inner span{
            height: 42px;
            line-height: 42px;
            text-align: center;
            display: block;
            color: #FFF;
        }
        .tabBar-ta .tabBar_inner .follow-icon{
            background: url(../image/ic_btn_pin_normal.png) center center no-repeat;
            background-size: 90px 26px;
        }
        .tabBar-ta .tabBar_inner .follow-icon.followed{
            background: url(../image/ic_btn_pined_normal.png) center center no-repeat;
            background-size: 90px 26px;
        }
        .tabBar-ta .tabBar_inner:active .follow-icon{
            background: url(../image/ic_btn_pin_press.png) center center no-repeat;
            background-size: 90px 26px;
        }
        .tabBar-ta .tabBar_inner:active .follow-icon.followed{
            background: url(../image/ic_btn_pined_press.png) center center no-repeat;
            background-size: 90px 26px;
        }
        .my-intro{
            padding: 0.9em 0.5em;
            color: #6A6A6A;
            background-color: #FFF;
        }
        .photos-header{
            height: 45px;
            border-top: 1px solid #CCC;
            background-color: #FFF;
        }
        .photos-header .tabs-inner{
            width: 33%;
            text-align: center;
            float: left;
            height: 45px;
            line-height: 45px;
            background: url(../image/profile_white_dividing.png) right center no-repeat;
            background-size: 1px 100%;
        }
        .photos-header .tabs-inner.last{
            background: none;
        }
        .photos-header .tabs-inner .tabs-icon{
            display: inline-block;
            width: 16px;
            height: 45px;
            vertical-align: bottom;
        }
        .tabs-inner .tabs-icon.mypost{
            background: url(../image/tm_ic_mypost_normal.png) center center no-repeat;
            background-size: 16px 16px;
        }
        .tabs-inner.active .tabs-icon.mypost{
            background: url(../image/tm_ic_mypost_pressed.png) center center no-repeat;
            background-size: 16px 16px;
        }
        .tabs-inner .tabs-icon.like{
            background: url(../image/tm_ic_like_normal.png) center center no-repeat;
            background-size: 16px 16px;
        }
        .tabs-inner.active .tabs-icon.like{
            background: url(../image/tm_ic_like_selected.png) center center no-repeat;
            background-size: 16px 16px;
        }
        .tabs-inner .tabs-icon.pics{
            background: url(../image/tm_ic_pics_normal.png) center center no-repeat;
            background-size: 16px 16px;
        }
        .tabs-inner.active .tabs-icon.pics{
            background: url(../image/tm_ic_pics_press.png) center center no-repeat;
            background-size: 16px 16px;
        }
        .tabs-inner .tabs-text{
            color: #888888;
            height: 45px;
            line-height: 45px;
        }
        .tabs-inner.active .tabs-text{
            color: #C41000;
        }


        .profile_box .tabBar{
            height: 61px;
            width: 100%;
            background-color: #323237;
        }
        .tabBar .tabBar_inner{
            float: left;
            width: 20%;
            height: 100%;
            background: url(../image/profile_tabBar_dividing.png) right center no-repeat;
            background-size: 1px 100%;
        }

        .tabBar .tabBar_inner:active{
            background: #A5A5A5 url(../image/profile_tabBar_dividing.png) right center no-repeat;
            background-size: 1px 100%;
        }
        .tabBar .tabBar_inner.last{
            background: none;
        }
        .tabBar .tabBar_inner.last:active{
            background: #A5A5A5;
        }
        .tabBar_inner .text{
            font-size: 0.7em !important;
        }
        .tabBar_inner .num_top,.tabBar_inner .text{
            color: #FFF;
            margin-top: 0.5em;
            display: block;
            text-align: center;

        }
        .profile_detail_container{
            padding-right: 0.75em;
        }
        .profile_detail_box{
            margin-top: 0.75em;
        }
        .profile_detail_inner{
            width: 33.3%;
            padding-left: 0.75em;
        }
        .profile_detail{
            background-color: #FFF;
        }
        .profile_detail:active{
            background-color: #CBCBCB;
        }
        .profile_detail img{
            margin: 0 auto;
            padding: 1em 0;
            width: 40px;
            display: block;
        }
        .profile_detail .title{
            display: block;
            font-size: 0.9em;
            text-align: center;
            margin-bottom: 0.7em;
            text-indent: 0 !important;
        }
        .profile_detail .brief{
            display: block;
            font-size: 0.5em;
            color: #9E9E9E;
            text-align: center;
            padding-bottom: 1em;
            text-indent: 0 !important;
        }
        .clearfix:after{
            content: '';
            display: block;
            clear: both;
        }
    </style>
</head>
<body>
    <div id="wrap">
        <div id="main">
            <div class="profile_box">
                <div class="profile_top">
                    <i class="msg_icon" tapmode onclick=""></i>
                    <span class="config" tapmode onclick="">设置</span>
                    <span class="login_btn" tapmode onclick="">点击登录</span>
                </div>
                <div class="tabBar">
                    <div class="tabBar_inner" tapmode>
                        <span class="num_top">0</span>
                        <span class="text">待付款</span>
                    </div>
                    <div class="tabBar_inner" tapmode>
                        <span class="num_top">0</span>
                        <span class="text">待发货</span>
                    </div>
                    <div class="tabBar_inner" tapmode>
                        <span class="num_top">0</span>
                        <span class="text">待收货</span>
                    </div>
                    <div class="tabBar_inner" tapmode>
                        <span class="num_top">0</span>
                        <span class="text">待评价</span>
                    </div>
                    <div class="tabBar_inner last" tapmode>
                        <span class="num_top">0</span>
                        <span class="text">退款/售后</span>
                    </div>
                </div>
            </div>
            <div class="profile_detail_container">
                <div class="profile_detail_box clearfix">
                    <div class="profile_detail_inner pull-left">
                        <div class="profile_detail" tapmode>
                            <img src="../image/profile_item1.png" alt="">
                            <span class="title">全部订单</span>
                            <span class="brief">查看所有</span>
                        </div>
                    </div>
                    <div class="profile_detail_inner pull-left">
                        <div class="profile_detail" tapmode>
                            <img src="../image/profile_item2.png" alt="">
                            <span class="title">天猫会员</span>
                            <span class="brief">天猫会员</span>
                        </div>
                    </div>
                    <div class="profile_detail_inner pull-left">
                        <div class="profile_detail" tapmode>
                            <img src="../image/profile_item3.png" alt="">
                            <span class="title">收藏商品</span>
                            <span class="brief">收藏过的商品</span>
                        </div>
                    </div>
                </div>
                <div class="profile_detail_box clearfix">
                    <div class="profile_detail_inner pull-left">
                        <div class="profile_detail" tapmode>
                            <img src="../image/profile_item2.png" alt="">
                            <span class="title">天猫宝</span>
                            <span class="brief">查看余额</span>
                        </div>
                    </div>
                    <div class="profile_detail_inner pull-left">
                        <div class="profile_detail" tapmode>
                            <img src="../image/profile_item5.png" alt="">
                            <span class="title">优惠券</span>
                            <span class="brief">我的优惠券</span>
                        </div>
                    </div>
                    <div class="profile_detail_inner pull-left">
                        <div class="profile_detail" tapmode>
                            <img src="../image/profile_item6.png" alt="">
                            <span class="title">会员卡</span>
                            <span class="brief">我的会员卡</span>
                        </div>
                    </div>
                </div>
                <div class="profile_detail_box clearfix">
                    <div class="profile_detail_inner pull-left">
                        <div class="profile_detail" tapmode>
                            <img src="../image/profile_item7.png" alt="">
                            <span class="title">收藏店铺</span>
                            <span class="brief">收藏过的店铺</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript" src="../script/zepto.min.js"></script>
<script type="text/javascript">
    apiready = function(){
    	var profile = $api.dom('.profile_box');
    	$api.fixIos7Bar(profile);
        Zepto(function($){
            var em = parseInt(getComputedStyle(document.body,false).fontSize);
            var emW = em*3/4;
            var bodyW = $api.offset(document.body).w;
            var sp1_3 = (bodyW - 4*emW)/3;
            $('.profile_detail_inner').width(sp1_3);
        });
    }
</script>
</html>